<template>
    <div class="app-container">
        
        
    <el-form label-width="120px">
      <el-form-item label="图片标题">
        <el-input v-model="banner.title"/>
      </el-form-item>
      <el-form-item label="链接地址">
        <el-input v-model="banner.linkUrl"/>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="banner.sort" controls-position="right" :min="0"/>
      </el-form-item>

      <!-- 上传轮播图-->
      <el-form-item label="上传轮播图">
          <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :action="BASE_API+'/edu/oss/file'"
              class="avatar-uploader">
              <img width="500px" :src="banner.imageUrl">
          </el-upload>
      </el-form-item>


      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

    </div>
</template>

<script>
import bannerApi from '@/api/edu/banner'
export default {
    data () {
        return {
            saveBtnDisabled:false, //是否使能保存按钮
            BASE_API:process.env.BASE_API,
            banner:{
              title:'',
              imageUrl:'/static/01.png',
              linkUrl:'',
              sort:'',
              id:''
            }
        }
    },
    created () {//页面渲染前执行
        this.init()
    },
    watch: {//监听
      $route(to,from){//路由变化方式，路由发生变化，方法就会执行
        this.init()
      }
    },
    methods: {
        init(){
          //判断路径是否有id值
          if(this.$route.params && this.$route.params.id){
            console.log(this.$route.params.id)
            //从路径获取id值
            const id = this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
          }else{
            //路径中没有id值，是添加操作，则清空表单
            this.banner={imageUrl:'/static/01.png'}
          }
        },
        saveOrUpdate(){
          //判断是修改还是添加
          //根据teacher是否有id
          if(!this.banner.id){
            //添加
            this.saveBanner()
          }else{
            //修改
            this.updateBanner()
          }
            
        },
        
        updateBanner(){
          bannerApi.updateBanner(this.banner)
          .then(response=>{
            //提示信息
              this.$message({
                type:'success',
                message:'修改成功!'
              })
              //回到列表页面  路由跳转
              this.$router.push({path:'/cms/banner/list'})
          })
        },
        saveBanner(){
            bannerApi.addBanner(this.banner)
            .then(response=>{
              //提示信息
              this.$message({
                type:'success',
                message:'添加成功!'
              })
              //回到列表页面  路由跳转
              this.$router.push({path:'/cms/banner/list'})
            })
            .catch(error=>{

            })
        },
        //根据id获取讲师
        getInfo(id){
          bannerApi.selectBannerById(id)
          .then(response=>{
            this.banner=response.data.crmBanner
          })
        },

        //封面上传成功
        handleAvatarSuccess(res, file){
            this.banner.imageUrl = res.data.url
        },
        //封面上传之前
        beforeAvatarUpload(file){
            const isPNG = file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isPNG) {
                this.$message.error('上传头像图片只能是 PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isPNG && isLt2M
        },
    }
}
</script>